<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref, type VNodeRef} from 'vue'
import {Server} from '@/stores/ajax';
import {useRouter, useRoute} from 'vue-router'
import {Delta, QuillEditor} from '@vueup/vue-quill'
import {GetUserState} from '@/stores/userState';
import MyQuill from '@/components/quillComponent.vue'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import commentList from '@/components/bbs/CommentList1.vue'
import subareaCard from '@/components/bbs/subareaCard1.vue'
import postInputArea from '../postInputArea1.vue';

import {
    ArrowLeft,
} from '@element-plus/icons-vue'
import {timeFormat} from '@/utils'
import {ServerUtils} from '@/serverUtils';

let route = useRoute()
let router = useRouter()
let post = ref<any>({})
let tid = Number(route.params['tid'])
let to = Number(route.params['to'])
let currentPage = Number(route.params['page'] ?? 1)
console.log(tid, currentPage)

let topic = ref<any>({})
let posts_per_page = 10

const refresh = async () => {
    await ServerUtils.getSubPosts(null, ['collect', 'star'], 1, 0, false, tid).then(res => {
        console.log(res)
        post.value = res.post
        topic.value = res.topic
    })
}
refresh()

let commentEditor = $ref<any>()
let subCommentEditor = $ref<VNodeRef>()

let maxPostWordsLength = $ref(1000)
const getQuillHTML = (editor: any) => {
    return new QuillDeltaToHtmlConverter(editor.getContents().ops, {}).convert()
}
const handleCommentCommit = async (pid: number) => {
    await ServerUtils.comment(commentEditor, pid, 5, maxPostWordsLength).then(() => {
        refresh()
    })
}

</script>
<!-- }}} -->

<template>
    <!-- <QuillEditor theme="bubble" content-type="delta" -->
    <!--     ref="subCommentEditor" style="display: none;" -->
    <!--     :placeholder="`回帖：`" /> -->
    <div class="fhs">
        <div class="fvs rhs-affix-area">
            <subareaCard :subarea="topic.subarea">
            </subareaCard>
            <div class="rightside-block-2 card-block">
                <el-button class="b1" color="#fff0"
                    @click="$router.push({path: `/bbs/forums/publish/${topic.subarea.id}`})">
                    <div class="fh b1-inner">
                        <img src="icon-keyboard.png"
                            class="icon">
                        发布主题
                    </div>
                </el-button>
            </div>
        </div>

        <div class="post-block card-block">
            <el-skeleton v-if="!topic.id" :rows="5"
                animated />
            <div v-else="topic.id">
                <div class="top-line fhs">
                    <el-button :icon="ArrowLeft" class="b1"
                        style="" color="#fff0"
                        @click="router.go(-1)">
                        返回
                    </el-button>
                    <el-breadcrumb separator="/"
                        style="font-size: 14px;">
                        <el-breadcrumb-item class="bc"
                            :to="{path: '/bbs/forums'}">分区
                        </el-breadcrumb-item>
                        <el-breadcrumb-item class="bc"
                            :to="{path: `/bbs/forums/subarea/${topic.sid}`}">
                            {{ topic.subarea.name}}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>{{ topic.name}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="top-area">
                    <div class="topic-title"
                        v-dompurify-html='topic.name' />
                    <div class="topic-content"
                        v-dompurify-html='post.content' />
                    <div class="topic-data fhs">
                        <div class="author-avatar fv">
                            <el-avatar :size="14"
                                :src="Server.fileBaseURL + post.user.avatar" />
                        </div>
                        <div class="author-name">{{
                                post.user.user_name
                        }}</div>
                        <img src="icon-time.png"
                            class="icon-time">
                        <div class="publish-time">
                            {{
                                    timeFormat(post.create_time)
                            }}
                        </div>
                        <img src="icon-view.png"
                            class="icon-view">
                        <div class="view-num">
                            {{ post.views}}
                        </div>
                        <img src="icon-remark.png"
                            class="icon-remark">

                        <div class="remark-num">
                            {{ post.subpost_num}}
                        </div>
                    </div>
                    <div class="div-line"></div>
                </div>
                <commentList :ppid="post.pid"  sortby="create_time" direction="ASC" :show-only-author="true" :roll-to-pid="to"/>
                
                <div class="comment-area fhs" style="margin-left: -13px;margin-top: 30px;">
                    <postInputArea :pid='post.pid'/>
                </div>

            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 240px;
}

.rightside-block-1 {
    background-color: white;
    padding: 16px 16px 20px;
    margin-bottom: 4px;

    .subarea-title {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .subarea-data {
        font-size: 14px;
        color: #999999;
        margin-bottom: 12px;

        .label1,
        .label2 {
            margin-right: 4px;
        }

        .topic-num {
            margin-right: 12px;
        }
    }

    .subarea-intro {
        font-size: 14px;
        color: #666666;
        line-height: 24px;
    }
}

.rightside-block-2 {
    background-color: white;
    /* padding: 16px 16px 20px; */

    .b1 {
        width: 100%;
        height: 54px;
    }

    .b1-inner {
        align-items: center;
        color: #666666;
        font-size: 16px;
    }

    .icon {
        width: 40px;
        margin-right: 4px;
    }
}

.post-block {
    background-color: white;
    flex-grow: 1;
    margin-right: 4px;
    padding: 16px 30px 30px;
    min-width: 660px;
    max-width: 876px;

    .top-line {
        align-items: center;

        .b1 {
            border-width: 0;
            justify-content: start;
            color: #999;
            padding: 0;
            margin-right: 20px;
        }

        .b1:hover {
            color: #666;
            background-color: #fff0;
        }

        .b1:active {
            color: #ccc;
            background-color: #fff0;
        }

        .bc:hover {
            color: #444;
        }

    }

    .top-area {
        .topic-title {
            font-size: 24px;
            color: #333333;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 4px;
        }

        .topic-content {
            font-size: 16px;
            color: #333333;
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 20px;
        }

        .topic-data {
            font-size: 14px;
            color: #999999;
            align-items: center;
            margin-bottom: 10px;

            .author-avatar {
                margin-right: 4px;
                margin-left: 10px;
            }

            .author-name {
                margin-right: 15px;
            }

            .icon-time {
                width: 18px;
                height: 18px;
                margin-right: 2px;
            }

            .publish-time {
                margin-right: 16px;
            }

            .view-num {
                margin-right: 16px;
            }

            .icon-view {
                width: 18px;
                height: 18px;
                filter: opacity(0.6);
                margin-right: 2px;
            }

            .icon-remark {
                width: 14px;
                height: 14px;
                filter: opacity(0.7);
                margin-right: 2px;
            }

        }

        .div-line {
            width: 100%;
            border-top: 1px solid #0003;
        }
    }

    .only-author {
        width: 70px;
        text-align: center;

    }

    .bottom-tools-line {
        margin: 20px 0 40px;
    }

    .comment-area {
        .avatar {
            margin: 10px 20px 0 10px;
        }

        .rightside {
            flex-grow: 1;
        }

        .text-area {
            margin-right: 20px;
            height: 160px;
        }

        .b-post {
            margin: 8px 0 30px;
            font-size: 16px;
            max-width: 100px;
            letter-spacing: 10px;
        }

        .b-post.b-post {
            text-indent: -10px;
            direction: rtl;
        }
    }

}
</style>
<style lang="scss">
.el-pager {
    .is-active {
        font-weight: bold;
    }
}

.hidebox .el-checkbox__input {
    display: none;

    .is-active {
        font-weight: bold;
    }
}

.hidebox .el-checkbox.is-checked {

    .el-checkbox__label {
        font-weight: bold;
    }
}

.remark-content p:first-of-type {
    display: inline;
    margin-left: 10px;
}
</style>
